<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表达验证</title>
</head>
<body>

</body>
</html>
    1.AngularJS能够将HTML5表单验证功能同它自己的验证指令结合起来使用，并且非常方便。
     AngularJS提供了很多表单验证指令，我们会介绍其中一些核心的验证功能，然后介绍如何创建自己的验证器。
<form name="form" novalidate>
    <label name="email">Your email</label>
    <input type="email" name="email" ng-model="email" placeholder="Email Address" />
</form>

    2.借助AngularJS，我们不需要花太多额外的精力就可以轻松实现客户端表单验证功能。虽然Web应用安全不能完全依赖客户端验证，但客户端验证可以提供表单状态的实时反馈。
      要使用表单验证，首先要确保表单像上面的例子一样有一个name属性。
      所有输入字段都可以进行基本的验证，比如最大、最小长度等。这些功能是由新的HTML5表单属性提供的。
      如果想要屏蔽浏览器对表单的默认验证行为，可以在表单元素上添加novalidate标记。

    3.下面看一下可以在input元素上使用的所有验证选项。
        1. 必填项:验证某个表单输入是否已填写，只要在输入字段元素上添加HTML5标记required即可：
        <input type="text" required />
        2. 最小长度:验证表单输入的文本长度是否大于某个最小值，在输入字段上使用AngularJS指令 ng-minleng="{number}"：
        <input type="text" ng-minlength="5" />
        3. 最大长度:验证表单输入的文本长度是否小于或等于某个最大值，在输入字段上使用AngularJS指令 ng-maxlength="{number}"：
        <input type="text" ng-maxlength="20" />
        4. 模式匹配:使用ng-pattern="/PATTERN/"来确保输入能够匹配指定的正则表达式：
        <input type="text" ng-pattern="[a-zA-Z]" />
        5. 电子邮件;验证输入内容是否是电子邮件，只要像下面这样将input的类型设置为email即可：
        <input type="email" name="email" ng-model="user.email" />
        6. 数字:验证输入内容是否是数字，将input的类型设置为number：
        <input type="number" name="age" ng-model="user.age" />
        7. URL:验证输入内容是否是URL，将input的类型设置为 url：
        <input type="url" name="homepage" ng-model="user.facebook_url" />
        8. 自定义验证
        在AngularJS中自定义指令是非常容易的。鉴于目前还没有介绍到指令的相关内容，第10章
        再深入研究如何创建自定义验证。目前先来看一下如何通过向后端服务器发送请求，并通过响应
        的结果来将输入字段设置为合法或不合法，以确保输入字段中的内容是唯一的。
        9. 在表单中控制变量
        表单的属性可以在其所属的$scope对象中访问到，而我们又可以访问$scope对象，因此JavaScript可以间接地访问DOM中的表单属性。
        借助这些属性，我们可以对表单做出实时（和AngularJS中其他东西一样）响应。这些属性包括下面这些。
        （注意，可以使用下面的格式访问这些属性。）formName.inputFieldName.property
         未修改的表单
        这是一个布尔属性，用来判断用户是否修改了表单。如果未修改，值为true，如果修改过值为false：
        formName.inputFieldName.$pristine
         修改过的表单
        只要用户修改过表单，无论输入是否通过验证，该值都返回true：formName.inputFieldName.$dirty
         合法的表单
        这个布尔型的属性用来判断表单的内容是否合法。如果当前表单内容是合法的，下面属性的值就是true：
        formName.inputFieldName.$valid
         不合法的表单
        这个布尔属性用来判断表单的内容是否不合法。如果当前表单内容是不合法的，下面属性的值为true：
        formName.inputFieldName.$invalid
         错误
        这是AngularJS提供的另外一个非常有用的属性：$error对象。它包含当前表单的所有验证内容，以及它们是否合法的信息。用下面的语法访问这个属性：
        formName.inputfieldName.$error
        如果验证失败，这个属性的值为true；如果值为false，说明输入字段的值通过了验证。
        10. 一些有用的CSS样式
        AngularJS处理表单时，会根据表单当前的状态添加一些CSS类（例如当前是合法的、未发生变化的，等等），这些CSS类的命名和前面介绍的属性很相似。
        它们包括：
        .ng-pristine {}
        .ng-dirty {}
        .ng-valid {}
        .ng-invalid {}
        它们对应着表单输入字段的特定状态。当某个字段中的输入非法时，.ng-invlid类会被添加到这个字段上。当前例子中的站点将
        对应的CSS样式设置为：
        input.ng-invalid {
        border: 1px solid red;
        }
        input.ng-valid {
        border: 1px solid green;
        }
         $parsers
        当用户同控制器进行交互，并且ngModelController中的$setViewValue()方法被调用时，$parsers数组中的函数会以流水线的形式被逐个调用。
        第一个$parse被调用后，执行结果会传递给第二个$parse，以此类推。
        这些函数可以对输入值进行转换，或者通过$setValidity()函数设置表单的合法性。
        使用$parsers数组是实现自定义验证的途径之一。例如，假设我们想要确保输入值在某两个数值之间，可以在$parsers数组中入栈一个新的函数，
        这个函数会在验证链中被调用。每个$parser返回的值都会被传入下一个$parser中。当不希望数据模型发生更新时返回undefined。
        angular.module('myApp')
        .directive('oneToTen', function() {
        return {
        require: '?ngModel',
        link: function(scope, ele, attrs, ngModel) {
        if (!ngModel) return;
        ngModel.$parsers.unshift(
        function(viewValue) {
        var i = parseInt(viewValue);
        if (i >= 0 && i < 10) {
        ngModel.$setValidity('oneToTen', true);
        return viewValue;
        } else {
        ngModel.$setValidity('oneToTen', false);
        return undefined;
        }